<template>
    <div class="home">
        <div class="menu-view">
            <MainMenu></MainMenu>
        </div>
        <div class="head-view">
            <div class="breadcrumb">
                <Breadcrumb>
					<BreadcrumbItem>{{$route.meta.title}}</BreadcrumbItem>
				</Breadcrumb>
            </div>
            <div class="user-panel">张三，退出系统</div>
        </div>
        <div class="main-view">
            <div class="main-panel">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>

import MainMenu from '@/components/MainMenu'

export default {
    components: {
		MainMenu
	},
    data () {
        return {

        };
    },
    computed: {
    },
    mounted() {
        console.log($route)
    },
    methods: {
    }
};
</script>

<style lang="less" scoped>
.home {  
    .menu-view {
        position: absolute;
		background-color: #48505F;
		width: 200px;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 2;
    }
    .head-view {
        min-width: 1200px;
        height: 70px;
        position: absolute;
        background-color: #fff;
        right: 0;
        left: 200px;
        box-shadow: 0 0 6px #999;
        z-index: 2;
        display: flex;
        align-items: center;
        padding: 0 80px 0 20px;
        .breadcrumb {
            flex: 1;
        }
    }
    .main-view {
        position: absolute;
        top: 70px;
        left: 200px;
        right: 0;
        bottom: 0;
        min-width: 1200px;
    }
}
</style>
